<script setup lang="ts">
import { ref, computed } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import RuleDetail from "./components/RuleDetail.vue";

defineOptions({
  name: "Rules"
});

const formRef = ref();
const tableRef = ref();

const form = ref({
  ruleName: "",
  ruleType: "",
  bidWarning: ""
});

const loading = ref(false);
const showDetailDialog = ref(false);
const currentRule = ref({});
const dialogMode = ref("view");

const columns = ref([
  {
    label: "规则名称",
    prop: "name"
  },
  {
    label: "规则状态",
    prop: "status"
  },
  {
    label: "生效对象",
    prop: "target"
  },
  {
    label: "创建时间",
    prop: "createTime"
  },
  {
    label: "触发记录",
    prop: "triggerLog",
    slot: true
  },
  {
    label: "操作",
    prop: "operation",
    slot: true
  },
  {
    label: "上次编辑人员",
    prop: "lastEditor"
  }
]);

const dataList = ref([
  {
    name: "KN_73476451_21 90307286_BR_付费_YS_0116(白)",
    status: "生效中",
    target: "X个账号的X条广告>",
    createTime: "2025-03-15",
    triggerLog: "详情",
    operation: "详情 编辑 删除",
    lastEditor: "xxxxx"
  },
  {
    name: "KN_73476451_21 90307286_BR_付费_YS_0117(黑)",
    status: "生效中",
    target: "X个账号的X条广告>",
    createTime: "2025-03-15",
    triggerLog: "详情",
    operation: "详情 编辑 删除",
    lastEditor: "xxxxx"
  }
]);

const pagination = ref({
  total: 100,
  pageSize: 10,
  currentPage: 1
});

const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val;
};

const handleCurrentChange = (val: number) => {
  pagination.value.currentPage = val;
};

const onSearch = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

const ruleTypeOptions = [
  { label: "全部规则", value: "" },
  { label: "规则任务", value: "task" },
  { label: "出价警告", value: "warning" }
];

const bidWarningOptions = [
  { label: "全部", value: "" },
  { label: "已处理", value: "processed" },
  { label: "未处理", value: "unprocessed" }
];

const handleViewDetail = row => {
  currentRule.value = row;
  dialogMode.value = "view";
  showDetailDialog.value = true;
};

const handleEdit = row => {
  currentRule.value = row;
  dialogMode.value = "edit";
  showDetailDialog.value = true;
};

const handleCreate = () => {
  currentRule.value = {};
  dialogMode.value = "create";
  showDetailDialog.value = true;
};

const handleSubmit = formData => {
  // 这里处理表单提交
  console.log("提交的数据：", formData);
  if (dialogMode.value === "create") {
    // 处理新建
    dataList.value.push({
      ...formData,
      status: "生效中",
      target: "X个账号的X条广告>",
      lastEditor: "xxxxx"
    });
  } else if (dialogMode.value === "edit") {
    // 处理编辑
    const index = dataList.value.findIndex(
      item => item.name === currentRule.value.name
    );
    if (index !== -1) {
      dataList.value[index] = {
        ...dataList.value[index],
        ...formData
      };
    }
  }
};
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item prop="ruleType">
        <el-select
          v-model="form.ruleType"
          placeholder="选择规则类型"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in ruleTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="bidWarning">
        <el-select
          v-model="form.bidWarning"
          placeholder="出价警告"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in bidWarningOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="ruleName">
        <el-input
          v-model="form.ruleName"
          placeholder="搜索规则名称"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar title="规则任务" :columns="columns" @refresh="onSearch">
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="handleCreate"
        >
          新建自动化规则
        </el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          align-whole="center"
          showOverflowTooltip
          tooltip-options=""
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 200 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #triggerLog="{ row }">
            <el-button type="primary" link @click="handleViewDetail(row)">
              详情
            </el-button>
          </template>
          <template #operation="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" link>删除</el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <RuleDetail
      v-model:visible="showDetailDialog"
      :rule-data="currentRule"
      :mode="dialogMode"
      @submit="handleSubmit"
    />
  </div>
</template>

<style scoped lang="scss">
.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
